<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from "echarts";
let myHeading = ref(null)
onMounted(()=>{
  // let {proxy} = getCurrentInstance();
  // console.log(proxy.$echarts)
  // console.log(proxy.$axios)
  let myEcharts = echarts.init(myHeading.value);
  window.addEventListener('resize', function () {
    myEcharts.resize()
  })
  const option =  {
    title: {
      text: '数据分析.前四名',
      top: '5%',
      left: '5%',
      textStyle: {
        fontWeight: 500
      }
    },
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: '45%',
        z: 10,
        style: {
          text: '商品种类',
          font: '500 40px Microsoft YaHei',
          fill: '#ffb300'
        }
      },
      {
        type: 'text',
        left: 'center',
        top: '58%',
        z: 10,
        style: {
          text: '数据分析',
          font: '500 12px Microsoft YaHei',
          fill: '#999'
        }
      }
    ],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', ' 70%'],
        data: [
          { value: 350, name: '沙发', itemStyle: { color: '#ffea00' } },
          { value: 160, name: '床', itemStyle: { color: '#ffb300' } },
          { value: 150, name: '电视柜', itemStyle: { color: '#e8a914' } },
          { value: 140, name: '椅子', itemStyle: { color: '#e3af36' } }
        ],
        label: {
          alignTo: 'edge',
          formatter: function (params) {
            const sum = 1000
            // for (let i = 0; i < option.series[0].data.length; i++) {
            //   sum += option.series[0].data[i].value;
            // }
            const percentage = ((params.value / sum) * 100).toFixed(2)
            return `${params.name}   ${percentage}%`
          },
          edgeDistance: 70,
          rich: {
            time: {
              fontSize: 5,
              color: '#999'
            }
          }
        },
        labelLine: {
          length: 0,
          length2: 0,
          maxSurfaceAngle: 80
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  myEcharts.setOption(option)
})
</script>

<template>
  <div id="echarts" ref="myHeading" style="width: 48%; height: 370px"></div>
</template>

<style scoped lang="scss">
#echarts{
  //margin-top: 15px;
  box-shadow: 0px 10px 16px 0px
  rgba(132, 132, 152, 0.68);
  background: white;
  opacity: 0.9;
  border-radius: 15px;
  ::v-deep >div:first-child{
    width: 100%!important;
    canvas{
      width: 100%!important;
    }
  }
}
</style>
